<template>
  <view>
    <view class="text-center py-2 mt-1"> 订单详情</view>
    <nut-cell title="顾客" :desc="customerInfo.nickName"></nut-cell>
    <nut-cell title="手机号" :desc="customerInfo.phone"></nut-cell>
    <nut-cell title="拍摄状态" :desc="statusFilter" is-link @click="switchActionSheet"></nut-cell>
    <nut-cell title="拍摄服务" :desc="baseInfo.itemName"></nut-cell>
    <nut-cell title="服务时间" :desc="baseInfo.serviceTime"></nut-cell>
  </view>
  <view class="d-flex flex-wrap px-2">
    <view class="schedule-style pt-2" v-for="(item, index) in scheduleList" :key="index">
      <view class="d-flex jc-center">
        <nut-avatar size="large" :icon="item.employeeAvatar"></nut-avatar>
      </view>
      <view class="d-flex jc-center">
        <view class="fs-md">{{ item.roleName }}</view>
      </view>
      <view class="d-flex jc-center">
        <view>
          <nut-button v-if="item.employeeID === 0" type="primary" @click="createOrder(item)">
            点此排班
          </nut-button>
          <view class="btn-style" v-else>
            <nut-button @click="editOrder(item)"
              ><view style="max-width: 95px hidden;">{{ item.employeeName }}</view></nut-button
            >
          </view>
        </view>
      </view>
    </view>
  </view>
  <nut-actionsheet v-model:visible="isVisible" :menu-items="statusList" @choose="chooseItem">
  </nut-actionsheet>
  <nut-actionsheet
    v-model:visible="isVisibleSchedule"
    :menu-items="employeeList"
    @choose="chooseSchedule"
  >
  </nut-actionsheet>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import {
  getOrderAbstract,
  putOrderAbstract,
  getOrderSchedule,
  postOrderSchedule,
  putOrderSchedule
} from '@/services/apis/order'
import { getEmployeeListRole } from '@/services/apis/employee'
import { statusList } from '@/common/data'
import { roleList } from '@/common/data'
import { useStore } from '@/stores'

onMounted(() => {
  fetchOrderAbstract(orderNo)
  fetchOrderSchedule(orderNo)
})
const { orderNo } = Taro.getCurrentInstance().router!.params

const auth = useStore('auth')
// console.log(orderNo)

const customerInfo: any = ref({})
const baseInfo: any = ref({})
const isVisible = ref(false)

const isVisibleSchedule = ref(false)

const scheduleList = ref([])
const employeeList = ref([])
const roleNo = ref('')
const isEdit = ref(false)

const statusFilter = computed(() => {
  const res = statusList.find(ele => ele.id === baseInfo.value.status)
  // console.log(res?.name)
  return res?.name
})

const switchActionSheet = () => {
  isVisible.value = !isVisible.value
}

const chooseItem = async itemParams => {
  // console.log(itemParams.id)
  // console.log(orderNo, 'orderNo')
  await putOrderAbstract({
    orderNo,
    status: itemParams.id
  })
  Taro.showToast({
    title: '修改成功',
    icon: 'none',
    duration: 1000
  })
  fetchOrderAbstract(orderNo)
  // state.val = itemParams.name
}

const createOrder = async item => {
  // console.log(item.roleNo, 'item')
  roleNo.value = item.roleNo
  console.log(roleNo.value, 'roleNo.value ')
  await fetchEmployeeListRole(item.roleNo)
  isVisibleSchedule.value = !isVisibleSchedule.value
  isEdit.value = false
}
const editOrder = async item => {
  // console.log(item.roleNo, 'item')
  roleNo.value = item.roleNo
  console.log(roleNo.value, 'roleNo.value ')
  await fetchEmployeeListRole(item.roleNo)
  isVisibleSchedule.value = !isVisibleSchedule.value
  isEdit.value = true
}

//新增
const chooseSchedule = async itemParams => {
  console.log(itemParams.employeeID, 'itemParams')
  if (isEdit.value === false) {
    const params = { orderNo, roleNo: roleNo.value, employeeID: itemParams.employeeID }
    await postOrderSchedule(params)
  } else {
    const params = {
      orderNo,
      roleNo: roleNo.value,
      oldEmployeeID: itemParams.employeeID,
      newEmployeeID: itemParams.employeeID
    }
    await putOrderSchedule(params)
  }

  Taro.showToast({
    title: '修改成功',
    icon: 'none',
    duration: 1000
  })
  roleNo.value = ''
  await fetchOrderSchedule(orderNo)
}

const fetchOrderAbstract = async orderNo => {
  baseInfo.value = ''
  const { data } = await getOrderAbstract({ orderNo })
  customerInfo.value = data.customerInfo
  baseInfo.value = data.baseInfo
}

const fetchOrderSchedule = async orderNo => {
  const res = await getOrderSchedule({ orderNo })
  let flag = 1
  let id
  await res.data.list.forEach(async ele => {
    if (id === ele.roleNo) {
      flag += 1
    } else {
      id = ele.roleNo
      flag = 1
    }
    const role = roleList.find(item => {
      return item.id === ele.roleNo
    })

    ele.roleName = role!.name
    ele.roleName = ele.roleName + '(' + flag + ')'
  })

  scheduleList.value = res.data.list
}

const fetchEmployeeListRole = async roleNo => {
  // console.log(auth.storeId, 'storeID')
  const params = {
    storeID: auth.storeId,
    roleNo
  }
  const { data } = await getEmployeeListRole(params)
  console.log(data, 'fetchEmployeeListRole')
  employeeList.value = data.list.map(ele => {
    return { ...ele, name: ele.employeeName }
  })
}
</script>

<style lang="scss">
.schedule-style {
  width: 33.3%;
  .btn-style {
    .nut-button {
      width: 90px;
    }
    .hydrated {
      width: 90px;
      padding-left: 5px;
      overflow: hidden; /* 超出部分隐藏 */
      white-space: nowrap; /* 文本不换行 */
      text-overflow: ellipsis; /* 省略的文本用省略号表示 */
    }
  }
}
</style>
